<template>
  <div>
    <div class="hotImg"></div>
    <h2>更新日期：{{ updateTime }}</h2>
    <ul class="songlist">
      <li
        @click="$router.push(`/play?id=${item.id}`)"
        class="content"
        v-for="(item, idx) in songList"
        :key="item.id"
      >
        <div class="songInfo">
          <span>{{ idx < 9 ? "0" + (idx + 1) : idx + 1 }}</span>
          <span>{{ item.name }}</span>
          <img src="../assets/images/pause.png" alt="" id="image1" />
        </div>
        <div class="singgerInfo">
          <img src="../assets/images/SQ.png" alt="" />
          <p>
            <span v-for="ar in item.ar" :key="ar.id">
              {{ ar.name }}
            </span>
            <!-- {{ item.ar[0].name }} -->
            -{{ item.al.name }}
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      songList: [],
      updateTime: "00:00",
    };
  },
  mounted() {
      this.getHotList()
  },
  methods: {
    //封装一个调取热歌榜接口
    async getHotList() {
      const { data: res } = await this.$axios.get("playlist/detail", {
        params: {
          id: 3778678,
        },
      });
      if (res.code === 200) {
        this.songList = res.playlist.tracks.filter((item, i) => i < 20);
        this.updateTime = this.formateTime(res.playlist.updateTime);
        console.log(this.songList, "热歌榜数据");
      }
    },
    //封装一个时间函数转化
    formateTime(timer) {
      //获取东八区的时间
      //new Date() 时间构造函数
      var date = new Date(timer);
      //Thu Dec 17 2020 08:06:10 GMT+0800 (中国标准时间) 东八区标准时间
      //年份
      var year = date.getFullYear();
      //获取月份 月份在获取的时候要+1
      //字符串补位 es7中的方法。padStart(),在字符串的前面补位。padEnd(),在字符串的末尾补位
      // var a = '10'
      // console.log(a.padEnd(4,'x'),'字符串啊啊啊啊')
      var month = (date.getMonth() + 1 + "").padStart(2, "0");
      //日
      var day = (date.getDate() + "").padStart(2, "0");
      //小时
      var hours = (date.getHours() + "").padStart(2, "0");
      //分钟
      var minutes = (date.getMinutes() + "").padStart(2, "0");
      //秒
      var seconds = (date.getSeconds() + "").padStart(2, "0");
      console.log(seconds, "当前时间");
      //return `1+2+3+${seconds}`
      return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
    },
  },
};
</script>

<style scoped>
.hotImg {
  width: 100%;
  height: 2.92rem;
  background: #ccc;
}
.songlist .content {
  height: 1.1rem;
  padding-top: 12px;
  border-style: none none solid;
  border-width: 2px;
  border-color: #eeeeee;
}

.songlist .content span {
  font-size: 17px;
  padding-left: 8px;
  padding-bottom: 2px;
}

.songlist .content div {
  margin-top: 5px;
  margin-bottom: 5px;
}

.songlist .content div p {
  font-size: 12px;
  color: #888;
  display: inline;
}

.songlist .content div img {
  margin-left: 8px;
}

.songlist .content #image1 {
  position: relative;
  top: 5px;
  right: 25px;
  float: right;
}
.songInfo {
  height: 25px;
}
.songInfo span {
  float: left;
}
.singgerInfo {
  height: 20px;
}
.singgerInfo p,
.singgerInfo img {
  float: left;
}
</style>